﻿
<!DOCTYPE html>
<html>
<head>
	<title>Trebuchet - Login</title>
	
	<meta charset="UTF-8">
	<meta name="keywords" content="Trebuchet world domination strategy game"> 
	<meta name="description" content="Trebuchet, an online strategy game">
	
	<link rel="stylesheet" type="text/css" href="css/master.css">
	<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css">

	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
    <script language="JavaScript" type="text/javascript" src="/js/facebook.js" charset="iso-8859-1"></script>

	<script type="text/javascript">
        
	</script>
</head>
<body id="Home">
<form id="Form1" runat="server">
	<div id="fb-root"></div>
<header>
	            <div>
		            <h1><a href="/">Trebuchet <small>Alpha</small></a></h1>
		            <nav>
                        
			            <ul>
                            <li id="liLogin" runat="server"><a href="/">Login</a></li>
                            <li id="liRegister" runat="server"><a href="/">Register</a></li>
                            <li id="liUserName" runat="server"><label></label></li>
				            <li id="liDashboard" runat="server"><a href="../dashboard.aspx">Dashboard</a></li>
                            <li id="liStartGame" runat="server"><a class="zing" href="play.html">Start Game</a></li>
				            <li id="liUserSettings" runat="server"><a href="../UserSettings.aspx">Settings</a></li>
				            <li id="liLogout" runat="server"><a href="/">Sign Out</a></li>
			            </ul>
		            </nav>
		            <div class="clear"></div>
	            </div>
            </header>

<!-- Wrapper -->
<div id="Wrapper">
	<!-- Login & Registration -->
	<section id="Action">
		<div id="Login">
           		<Trebuchet:MessageDisplay id="mdMessageDisplayLogin" runat="server"></Trebuchet:MessageDisplay>
			<div>
				<label for="txtEmail">Email:</label>
				<asp:textbox id="txtEmail" runat="server"></asp:textbox>
			</div>
			<div>
				<label for="txtPassword">Password:</label>
				<input type="text" id="txtPassword" TextMode="Password"></input>
			</div>
			<div>
				<div class="fb-login-button" scope="email">Login with Facebook</div>
				<input type="submit" id="cmdLogin" cssclass="zing alt" Text="Login"/>
      			</div>
			<div class="sm">
				<a href="">Forgot password?</a>
			</div>
		</div>
		
		<div id="Register">
			<h2>Join Up!</h2>
            		
			<div>
				<label for="txtRegisterEmail">Email:</label>
				<input type="text" id="txtRegisterEmail" ></input>
			</div>
			<div>
				<label for="txtRegisterPassword">Password:</label>
				<input type="text" id="txtRegisterPassword" TextMode="Password"></input>
			</div>
			<div>
				<label for="txtRegisterPasswordConfirm">Confirm Password:</label>
				<input type="text" id="txtRegisterPasswordConfirm" TextMode="Password"></input>
			</div>
			<div>
				<input type="submit" id="cmdRegister" cssclass="zing alt" Text="Register"/>
			</div>
		</div>
	</section>
	<!-- / Login & Registration -->

	<!-- Promo Content -->
	<section id="Content">
		<div id="Promo">
			<h2>Build An Army.</h2>
			<h2>Destory Your Enemies.</h2>
			<h2>Conquer The World.</h2>
			
			<p>Trebuchet is an online, map-based strategy game. Sign up, choose your battleground, and challenge your friends or random opponents in a game of world domination.
			<br>
			<a class="zing" href="play.html">Get Started Now!</a>
			<br class="clear-left"></p>
		</div>
		
		<div class="spot left">
			<h3>Awesome Maps</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pretium pulvinar varius.</p>
		</div>
		
		<div class="spot right">
			<h3>Amazing Features</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pretium pulvinar varius.</p>
		</div>
	</section>
	<!-- / Promo Content -->
	
	<div class="clear"></div>

	<footer>
		&copy;2012 Algonquin Studios
	</footer>
	

</div>
<!-- / Wrapper -->

</form>
</body>
</html>